<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('projectRevenue.cooReport.queryCondition')}}</span></el-col>
      </el-row>
      <el-form :inline="true" :model="listQuery" style="padding: 0 20px">
        <el-row style="padding-bottom: 10px">
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('businessObjectives.country')}}</div>
              <dict-select v-model="listQuery.country" code="country" :clearable="true" @change="setBg"></dict-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Category</div>
              <el-select clearable v-model="listQuery.bg" @change="changeBg" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in bgList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Account</div>
              <el-select clearable multiple collapse-tags v-model="listQuery.bu" :clearable="true" @change="changeBu" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in buList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('projectRevenue.cooReport.clientName')}}</div>
              <!--<el-autocomplete style="width: 100%" :clearable="true" v-model="listQuery.clientName" :fetch-suggestions="getCustomerList" :placeholder="$t('projectRevenue.cooReport.enterCientName')" @select="selectCustomer"></el-autocomplete>-->
              <el-select v-model="listQuery.customerNo" filterable clearable remote reserve-keyword collapse-tags :placeholder="$t('projectRevenue.cooReport.enterCientName')" :remote-method="queryCustomer" :loading="loading"  :no-data-text="$t('public.noData')" :loading-text="$t('public.loading')"> <!--请输入客户简称-->
                <el-option v-for="item in optionsCustomer" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Year</div>
              <dict-select v-model="listQuery.year" code="year" :clearable="true"></dict-select>
            </div>
          </el-col>
          <el-col :span="4" style="margin-top: 32px">
            <div type="primary" class="yt-btn yt-btn-ys" @click="handleFilter">{{$t('button.query')}}</div>
            <div type="primary" class="yt-btn yt-ml8" @click="reset">{{$t('button.reset')}}</div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="yt-data-list" style="padding-bottom: 20px;" v-loading="show" :element-loading-text="$t('projectRevenue.cooReport.loading')" element-loading-spinner="el-icon-loading">
      <div class="yt-list-contentg" style="position: relative;">
        <span style="border-bottom: 3px solid #6dcaa8; line-height: 46px; display: inline-block;">{{$t('projectRevenue.cooReport.listTile')}}</span>
        <div class="yt-content-type">
          <div class="list-content-textType">{{$t('projectRevenue.cooReport.viewModle')}}</div>
          <el-select class="filter-item" v-model="pattern"  :placeholder="$t('placeholder.content')">
            <el-option v-for="item in patternList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="yt-list-box" v-if="pattern === '1'">
        <!-- 报表1  cooReportOne -->
        <!--合約資訊-->
        <header class="headerClass">{{$t('projectRevenue.cooReport.contractInfo')}}</header>
        <div class="yt-list-content">
          <div class="list-operation">
            <div class="yt-btn yt-btn-ys" type="primary" @click="handleRemit">{{$t('button.export')}}</div>
            <div class="yt-btn yt-ml8" type="primary" @click="setUp('buOne')">{{$t('button.sets')}}</div>
          </div>
          <el-table v-if="displayBlockNameListFla['buOne'] === 'buOne'" :row-style="changeCss" :data="list" :empty-text="$t('placeholder.emptyText')" border class="yt-table" max-height="500">
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.serialNum')" prop="index" width="60"></el-table-column>
            <el-table-column align="center" label="Category" prop="bg" v-if="buOne['bg']" min-width="100" :show-overflow-tooltip="true"/>
            <el-table-column align="center" label="Account" prop="bu" v-if="buOne['bu']" min-width="130" :show-overflow-tooltip="true"/>
            <el-table-column align="center" label="Year" prop="year" v-if="buOne['year']" min-width="100" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.recognizedIncome')" v-if="buOne['recognizedIncome']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.recognizedIncome }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.recognizedCost')" prop="recognizedCost" v-if="buOne['recognizedCost']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.recognizedCost}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfit4Year')" prop="contractGrossProfit4Year" v-if="buOne['contractGrossProfit4Year']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfit4Year}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfit4YearPercentage')" prop="contractGrossProfit4YearPercentage" v-if="buOne['contractGrossProfit4YearPercentage']" min-width="100" :show-overflow-tooltip="true"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractIncomeAfterYear')" v-if="buOne['contractIncomeAfterYear']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.contractIncomeAfterYear }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractCostAfterYear')" v-if="buOne['contractCostAfterYear']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.contractCostAfterYear }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfitAfterYear')" v-if="buOne['contractGrossProfitAfterYear']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfitAfterYear}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfit')" prop="contractGrossProfit" v-if="buOne['contractGrossProfitAfterYearPercentage']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div >{{scope.row.contractGrossProfitAfterYearPercentage}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.pastYearIncome')" prop="pastYearIncome" v-if="buOne['pastYearIncome']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.pastYearIncome}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.pastYearCost')" v-if="buOne['pastYearCost']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.pastYearCost}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfitPastYear')" v-if="buOne['contractGrossProfitPastYear']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfitPastYear}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfitPastYearPercentage')" prop="contractGrossProfitPastYearPercentage" v-if="buOne['contractGrossProfitPastYearPercentage']" min-width="100" :show-overflow-tooltip="true"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractIncome')" prop="contractIncome" v-if="buOne['contractIncome']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractIncome}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractCost')" prop="contractCost" v-if="buOne['contractCost']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractCost}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfit')" v-if="buOne['contractGrossProfit']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfit}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfitPercentage')" v-if="buOne['contractGrossProfitPercentage']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfitPercentage}}</div>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="displayBlockNameListFla['buOne'] === '0'">
            <el-tag type="warning"><i class="el-icon-warning"></i>{{$t('projectRevenue.cooReport.setMenu')}}</el-tag>
          </div>
        </div>

        <!-- 报表2  cooReportTwo-->
        <div class="yt-list-content">
          <!--完工收付進度-->
          <header class="headerClass" style="padding-left: 0px;">{{$t('projectRevenue.cooReport.completedIncomePayProgress')}}</header>
          <div class="list-operation">
            <div class="yt-btn yt-ml8" type="primary" @click="setUp('buTwo')">{{$t('button.sets')}}</div>
          </div>
          <el-table v-if="displayBlockNameListFla['buTwo'] === 'buTwo'" :row-style="changeCss" :data="list" :empty-text="$t('placeholder.emptyText')" border class="yt-table" style="width: 100%" max-height="500">
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.serialNum')" prop="index" width="60">
            </el-table-column>
            <el-table-column align="center" label="Category" prop="bg" v-if="buTwo['bg']" min-width="100" :show-overflow-tooltip="true"/>
            <el-table-column align="center" label="Account" prop="bu" v-if="buTwo['bu']" min-width="130" :show-overflow-tooltip="true"/>
            <el-table-column align="center" label="Year" prop="year" v-if="buTwo['year']" min-width="100" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.recognizedIncome')" v-if="buTwo['recognizedIncome']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.recognizedIncome }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionIncome4Year')" prop="completionIncome4Year" v-if="buTwo['completionIncome4Year']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.completionIncome4Year}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionCost4Year')" prop="completionCost4Year" v-if="buTwo['completionCost4Year']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.completionCost4Year}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionProfit4Year')" prop="completionProfit4Year" v-if="buTwo['completionProfit4Year']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.completionProfit4Year}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionPercentage4Year')" prop="completionPercentage4Year" v-if="buTwo['completionPercentage4Year']" min-width="100" :show-overflow-tooltip="true"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionIncomeCount')" prop="completionIncomeCount" v-if="buTwo['completionIncomeCount']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.completionIncomeCount}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionCostCount')" prop="completionCostCount" v-if="buTwo['completionCostCount']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.completionCostCount}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.sumIdentifyIncome')" prop="sumIdentifyIncome" v-if="buTwo['sumIdentifyIncome']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.sumIdentifyIncome}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.sumIdentifyCost')" prop="sumIdentifyCost" v-if="buTwo['sumIdentifyCost']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.sumIdentifyCost}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.sumReceivablesFunds')" prop="sumReceivablesFunds" v-if="buTwo['sumReceivablesFunds']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.sumReceivablesFunds}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.sumPaymentFunds')" prop="sumPaymentFunds" v-if="buTwo['sumPaymentFunds']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.sumPaymentFunds}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.notReceiveAmount')" prop="notReceiveAmount" v-if="buTwo['notReceiveAmount']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.notReceiveAmount}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.notPaymentAmount')" prop="notPaymentAmount" v-if="buTwo['notPaymentAmount']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.notPaymentAmount}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.sumReceivableRequestFunds')" prop="sumReceivableRequestFunds" v-if="buTwo['sumReceivableRequestFunds']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.sumReceivableRequestFunds}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.sumPayableRequestFunds')" prop="sumPayableRequestFunds" v-if="buTwo['sumPayableRequestFunds']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.sumPayableRequestFunds}}</div>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="displayBlockNameListFla['buTwo'] === '0'">
            <el-tag type="warning"><i class="el-icon-warning"></i> {{$t('projectRevenue.cooReport.setMenu')}}</el-tag>
          </div>
        </div>

        <!-- 报表3  cooReportThree-->
        <div class="yt-list-content">
          <!--營運現況-->
          <header class="headerClass" style="padding-left: 0px;">{{$t('projectRevenue.cooReport.operatingCurrent')}}</header>
          <div class="list-operation">
            <div class="yt-btn yt-ml8" type="primary" @click="setUp('buThree')">{{$t('button.sets')}}</div>
          </div>
          <el-table v-if="displayBlockNameListFla['buThree'] === 'buThree'" :row-style="changeCss" :data="buCostCount" :empty-text="$t('placeholder.emptyText')" border class="yt-table" style="width: 100%" max-height="500" :span-method="objectSpanMethod">
            <el-table-column prop="index" align="center" :label="$t('projectRevenue.cooReport.serialNum')" width="60"/>
            <el-table-column align="center" label="Category" prop="bg" v-if="buThree['bg']" min-width="100" :show-overflow-tooltip="true"/>
            <el-table-column align="center" label="Account" prop="bu" v-if="buThree['bu']" min-width="130" :show-overflow-tooltip="true"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionIncome4Year')" prop="completionIncome4Year" v-if="buThree['completionIncome4Year']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.completionIncome4Year}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionCost4Year')" v-if="buThree['completionCost4Year']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionCost4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionProfit4Year')" v-if="buThree['completionProfit4Year']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionProfit4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionProfitPercentage4Year')" v-if="buThree['completionProfitPercentage4Year']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionProfitPercentage4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.projectLaborCost')" prop="projectLaborCost" v-if="buThree['projectLaborCost']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.projectLaborCost}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.manageLaborCost')" prop="manageLaborCost" v-if="buThree['manageLaborCost']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.manageLaborCost}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.businessCost')" prop="businessCost" v-if="buThree['businessCost']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.businessCost}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.manageCost')" prop="manageCost" v-if="buThree['manageCost']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.manageCost}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.amortization')" v-if="buThree['amortization']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.amortization}}</div>
              </template>
            </el-table-column>
            <!--<el-table-column align="center" label="成本小计" v-if="buThree['costTotal']">-->
              <!--<template slot-scope="scope">-->
                <!--<div v-format="'#,##0'">{{scope.row.costTotal}}</div>-->
              <!--</template>-->
            <!--</el-table-column>-->
            <!--<el-table-column align="center" label="成本占比" prop="costTotalPercentage" v-if="buThree['costTotalPercentage']">-->
              <!--<template slot-scope="scope">-->
                <!--<div >{{scope.row.costTotalPercentage}}</div>-->
              <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.manageCostAmortization')" v-if="buThree['manageCostAmortization']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.manageCostAmortization}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.hqamortization')" prop="hqamortization" v-if="buThree['hQAmortization']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.hqamortization}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.operatingProfit')" prop="operatingProfit" v-if="buThree['operatingProfit']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.operatingProfit}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.operatingProfitPercentage')" prop="operatingProfitPercentage" v-if="buThree['operatingProfitPercentage']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.operatingProfitPercentage}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.manageCostAmortization')" v-if="buThree['manageCostAmortization']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.manageCostAmortizations}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.hqamortization')" prop="hqamortizations" v-if="buThree['hQAmortization']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.hqamortizations}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.operatingProfit')" prop="operatingProfits" v-if="buThree['operatingProfit']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.operatingProfits}}</div>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="displayBlockNameListFla['buThree'] === '0'">
            <el-tag type="warning"><i class="el-icon-warning"></i> {{$t('projectRevenue.cooReport.setMenu')}}</el-tag>
          </div>
        </div>
      </div>

      <div class="yt-list-box" v-if="pattern === '2'">
        <!-- 报表1  cooReportOne 2019跨2020 合約資訊-->
        <header class="headerClass">{{listQuery.year?parseInt(listQuery.year)-1:''}}{{$t('projectRevenue.cooReport.to')}}{{listQuery.year}} {{$t('projectRevenue.cooReport.contractInfo')}}</header>
        <div class="yt-list-content">
          <div class="list-operation">
            <div class="yt-btn yt-btn-ys" type="primary" @click="handleRemit">{{$t('button.export')}}</div>
            <div class="yt-btn yt-ml8" type="primary" @click="setUp('projectOne')">{{$t('button.sets')}}</div>
          </div>
          <el-table v-if="displayBlockNameListFla['projectOne'] === 'projectOne'" :key="'projectOne'" :row-style="changeCss" :data="projectList" border class="yt-table" style="width: 100%" max-height="500">
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.serialNum')" fixed prop="index" width="60"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.projectNo')" fixed prop="projectNo" v-if="projectOne['projectNo']" min-width="100" :show-overflow-tooltip="true"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.projectName')" fixed prop="projectName" v-if="projectOne['projectName']" min-width="300" :show-overflow-tooltip="true"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.isFinish')" prop="isFinish" v-if="projectOne['isFinish']" min-width="100" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.recognizedIncome')" v-if="projectOne['recognizedIncome']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.recognizedIncome }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.recognizedCost')" prop="recognizedCost" v-if="projectOne['recognizedCost']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.recognizedCost}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfit4Year')" prop="contractGrossProfit4Year" v-if="projectOne['contractGrossProfit4Year']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfit4Year}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfit4YearPercentage')" prop="contractGrossProfit4YearPercentage" v-if="projectOne['contractGrossProfit4YearPercentage']" min-width="100" :show-overflow-tooltip="true"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractIncomeAfterYear')" v-if="projectOne['contractIncomeAfterYear']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.contractIncomeAfterYear }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractCostAfterYear')" v-if="projectOne['contractCostAfterYear']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.contractCostAfterYear }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfitAfterYear')" v-if="projectOne['contractGrossProfitAfterYear']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfitAfterYear}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfitAfterYearPercentage')" prop="contractGrossProfitAfterYearPercentage" v-if="projectOne['contractGrossProfitAfterYearPercentage']" min-width="100" :show-overflow-tooltip="true"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.pastYearIncome')" prop="pastYearIncome" v-if="projectOne['pastYearIncome']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.pastYearIncome}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.pastYearCost')" v-if="projectOne['pastYearCost']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.pastYearCost}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfitPastYear')" v-if="projectOne['contractGrossProfitPastYear']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfitPastYear}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfitPastYearPercentage')" prop="contractGrossProfitPastYearPercentage" v-if="projectOne['contractGrossProfitPastYearPercentage']" min-width="100" :show-overflow-tooltip="true"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractIncome')" prop="contractIncome" v-if="projectOne['contractIncome']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractIncome}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractCost')" prop="contractCost" v-if="projectOne['contractCost']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractCost}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfit')" v-if="projectOne['contractGrossProfit']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfit}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfitPercentage')" prop="contractGrossProfitPercentage" v-if="projectOne['contractGrossProfitPercentage']" min-width="100" :show-overflow-tooltip="true"/>
          </el-table>
          <div v-if="displayBlockNameListFla['projectOne'] === '0'">
            <el-tag type="warning"><i class="el-icon-warning"></i> {{$t('projectRevenue.cooReport.setMenu')}}</el-tag>
          </div>
        </div>
        <!-- 报表2  cooReportTwo 2019跨2020 完工收付進度-->
        <header class="headerClass">{{listQuery.year?parseInt(listQuery.year)-1:''}}{{$t('projectRevenue.cooReport.to')}}{{listQuery.year}} {{$t('projectRevenue.cooReport.completedIncomePayProgress')}}</header>
        <div class="yt-list-content">
          <!--<div class="list-operation">
            <div class="yt-btn yt-ml8" type="primary" @click="setUp('projectTwo')">{{$t('button.sets')}}</div>
          </div>-->
          <el-table v-if="displayBlockNameListFla['projectOne'] === 'projectOne'" :key="'projectTwo'" :row-style="changeCss" :data="projectList" border class="yt-table" style="width: 100%" max-height="500">
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.serialNum')" fixed prop="index" width="60"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.projectNo')" fixed prop="projectNo" v-if="projectTwo['projectNo']" min-width="100" :show-overflow-tooltip="true"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.projectName')" fixed prop="projectName" v-if="projectTwo['projectName']" min-width="300" :show-overflow-tooltip="true"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.isFinish')" prop="isFinish" v-if="projectTwo['isFinish']" min-width="100" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.recognizedIncome')" v-if="projectTwo['recognizedIncome']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.recognizedIncome }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionIncome4Year')" prop="completionIncome4Year" v-if="projectTwo['completionIncome4Year']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionIncome4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionCost4Year')" prop="completionCost4Year" v-if="projectTwo['completionCost4Year']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionCost4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionProfit4Year')" prop="completionProfit4Year" v-if="projectTwo['completionProfit4Year']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionProfit4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionPercentage4Year')" prop="completionPercentage4Year" v-if="projectTwo['completionPercentage4Year']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionPercentage4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionIncomeCount')" prop="completionIncomeCount" v-if="projectTwo['completionIncomeCount']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionIncomeCount }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionCostCount')" prop="completionCostCount" v-if="projectTwo['completionCostCount']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionCostCount }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.sumIdentifyIncome')" prop="sumIdentifyIncome" v-if="projectTwo['sumIdentifyIncome']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.sumIdentifyIncome }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.sumIdentifyCost')" prop="sumIdentifyCost" v-if="projectTwo['sumIdentifyCost']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.sumIdentifyCost }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.sumReceivablesFunds')" prop="sumReceivablesFunds" v-if="projectTwo['sumReceivablesFunds']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.sumReceivablesFunds }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.sumPaymentFunds')" prop="sumPaymentFunds" v-if="projectTwo['sumPaymentFunds']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.sumPaymentFunds }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.notReceiveAmount')" prop="notReceiveAmount" v-if="projectTwo['notReceiveAmount']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.notReceiveAmount }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.notPaymentAmount')" prop="notPaymentAmount" v-if="projectTwo['notPaymentAmount']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.notPaymentAmount }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.sumReceivableRequestFunds')" prop="sumReceivableRequestFunds" v-if="projectTwo['sumReceivableRequestFunds']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.sumReceivableRequestFunds }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.sumPayableRequestFunds')" prop="sumPayableRequestFunds" v-if="projectTwo['sumPayableRequestFunds']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.sumPayableRequestFunds }}</div>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="displayBlockNameListFla['projectOne'] === '0'">
            <el-tag type="warning"><i class="el-icon-warning"></i> {{$t('projectRevenue.cooReport.setMenu')}}</el-tag>
          </div>
        </div>

        <!-- 报表3  cooReportThree 2020 合約資訊-->
        <header class="headerClass">{{listQuery.year}} {{$t('projectRevenue.cooReport.contractInfo')}}</header>
        <div class="yt-list-content">
         <!-- <div class="list-operation">
            <div class="yt-btn yt-ml8" type="primary" @click="setUp('projectThree')">{{$t('button.sets')}}</div>
          </div>-->
          <el-table v-if="displayBlockNameListFla['projectOne'] === 'projectOne'" :row-style="changeCss" :key="'projectThree'" :data="projectCurrentList" border class="yt-table" style="width: 100%" max-height="500">
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.serialNum')" fixed prop="index" width="60"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.projectNo')" fixed prop="projectNo" v-if="projectThree['projectNo']" min-width="100" :show-overflow-tooltip="true"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.projectName')" fixed prop="projectName" v-if="projectThree['projectName']" min-width="300" :show-overflow-tooltip="true"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.isFinish')" prop="isFinish" v-if="projectThree['isFinish']" min-width="100" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.recognizedIncome')" v-if="projectThree['recognizedIncome']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.recognizedIncome }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.recognizedCost')" prop="recognizedCost" v-if="projectThree['recognizedCost']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.recognizedCost }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfit4Year')" prop="contractGrossProfit4Year" v-if="projectThree['contractGrossProfit4Year']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.contractGrossProfit4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfit4YearPercentage')" prop="contractGrossProfit4YearPercentage" v-if="projectThree['contractGrossProfit4YearPercentage']" min-width="100" :show-overflow-tooltip="true"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractIncomeAfterYear')" v-if="projectThree['contractIncomeAfterYear']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.contractIncomeAfterYear }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractCostAfterYear')" v-if="projectThree['contractCostAfterYear']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.contractCostAfterYear }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfitAfterYear')" v-if="projectThree['contractGrossProfitAfterYear']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfitAfterYear}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfit')" prop="contractGrossProfit" v-if="projectThree['contractGrossProfitAfterYearPercentage']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div >{{scope.row.contractGrossProfitAfterYearPercentage}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.pastYearIncome')" prop="pastYearIncome" v-if="projectThree['pastYearIncome']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.pastYearIncome }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.pastYearCost')" v-if="projectThree['pastYearCost']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.pastYearCost}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfitPastYear')" v-if="projectThree['contractGrossProfitPastYear']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfitPastYear}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfitPastYearPercentage')" prop="contractGrossProfitPastYearPercentage" v-if="projectThree['contractGrossProfitPastYearPercentage']" min-width="100" :show-overflow-tooltip="true"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractIncome')" prop="contractIncome" v-if="projectThree['contractIncome']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractIncome}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractCost')" prop="contractCost" v-if="projectThree['contractCost']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractCost}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfit')" v-if="projectThree['contractGrossProfit']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfit}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.contractGrossProfitPercentage')" v-if="projectThree['contractGrossProfitPercentage']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{scope.row.contractGrossProfitPercentage}}</div>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="displayBlockNameListFla['projectOne'] === '0'">
            <el-tag type="warning"><i class="el-icon-warning"></i> {{$t('projectRevenue.cooReport.setMenu')}}</el-tag>
          </div>
        </div>

        <!-- 报表4  cooReportFour 2020 完工收付進度 -->
        <header class="headerClass">{{listQuery.year}} {{$t('projectRevenue.cooReport.completedIncomePayProgress')}}</header>
        <div class="yt-list-content">
          <!--<div class="list-operation">
            &lt;!&ndash;<div class="yt-btn yt-btn-ys" type="primary" @click="handleRemit">{{$t('button.export')}}</div>&ndash;&gt;
            <div class="yt-btn yt-ml8" type="primary" @click="setUp('projectFour')">{{$t('button.sets')}}</div>
          </div>-->
          <el-table v-if="displayBlockNameListFla['projectOne'] === 'projectOne'" :row-style="changeCss" :key="'projectFour'" :data="projectCurrentList" border class="yt-table" style="width: 100%" max-height="500">
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.serialNum')" fixed prop="index" width="60"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.projectNo')" fixed prop="projectNo" v-if="projectFour['projectNo']" min-width="100" :show-overflow-tooltip="true"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.projectName')" fixed prop="projectName" v-if="projectFour['projectName']" min-width="300" :show-overflow-tooltip="true"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.isFinish')" prop="isFinish" v-if="projectFour['isFinish']" min-width="100" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.recognizedIncome')" v-if="projectFour['recognizedIncome']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.recognizedIncome }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionIncome4Year')" prop="completionIncome4Year" v-if="projectFour['completionIncome4Year']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionIncome4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionCost4Year')" prop="completionCost4Year" v-if="projectFour['completionCost4Year']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionCost4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionProfit4Year')" prop="completionProfit4Year" v-if="projectFour['completionProfit4Year']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionProfit4Year }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionPercentage4Year')" prop="completionPercentage4Year" v-if="projectFour['completionPercentage4Year']" min-width="100" :show-overflow-tooltip="true"/>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionIncomeCount')" prop="completionIncomeCount" v-if="projectFour['completionIncomeCount']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionIncomeCount }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.completionCostCount')" prop="completionCostCount" v-if="projectFour['completionCostCount']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.completionCostCount }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.sumIdentifyIncome')" prop="sumIdentifyIncome" v-if="projectFour['sumIdentifyIncome']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.sumIdentifyIncome }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.sumIdentifyCost')" prop="sumIdentifyCost" v-if="projectFour['sumIdentifyCost']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.sumIdentifyCost }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.sumReceivablesFunds')" prop="sumReceivablesFunds" v-if="projectFour['sumReceivablesFunds']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.sumReceivablesFunds }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.sumPaymentFunds')" prop="sumPaymentFunds" v-if="projectFour['sumPaymentFunds']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.sumPaymentFunds }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.notReceiveAmount')" prop="notReceiveAmount" v-if="projectFour['notReceiveAmount']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.notReceiveAmount }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.notPaymentAmount')" prop="notPaymentAmount" v-if="projectFour['notPaymentAmount']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.notPaymentAmount }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.sumReceivableRequestFunds')" prop="sumReceivableRequestFunds" v-if="projectFour['sumReceivableRequestFunds']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.sumReceivableRequestFunds }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('projectRevenue.cooReport.sumPayableRequestFunds')" prop="sumPayableRequestFunds" v-if="projectFour['sumPayableRequestFunds']" min-width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div v-format="'#,##0'">{{ scope.row.sumPayableRequestFunds }}</div>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="displayBlockNameListFla['projectOne'] === '0'">
            <el-tag type="warning"><i class="el-icon-warning"></i> {{$t('projectRevenue.cooReport.setMenu')}}</el-tag>
          </div>
        </div>

      </div>

      <el-dialog :title="$t('projectRevenue.cooReport.setVisible')" :visible.sync="TableTitleVisible">
        <yt-table-title :blockNameCode="blockNameCode" :displayBlockNameList ="displayBlockNameList" @cancel="cancel"></yt-table-title>
      </el-dialog>

    </div>
  </div>
</template>

<script>
  import { selectBu, selectBg, listbgAndbu } from '@/api/bu/index';
  import customerReq from '@/api/customer';
  import { getDataCOO, queryDisplayBlock } from '@/api/pmoReport/projectRevenue';
  import YtTableTitle from '@/components/yt-table-title/index';
  import { getBuAndBg } from '@/api/businessTarget/index';
  import dictSelect from '@/components/Dict/dictValueSelect';

  export default {
    name: 'cooReport',
    components: {
      dictSelect,
      YtTableTitle,
      'dict-select': () => import('@/components/Dict/dictValueSelect')
    },
    data() {
      return {
        bgArr: [],
        dataGroupByBG: [],
        loading: false,
        show: false,
        TableTitleVisible: false,
        optionsCustomer: [],
        displayBlockNameListFla: {},
        displayBlockNameList: [],
        buOne: {},
        buTwo: {},
        buThree: {},
        projectOne: {},
        projectTwo: {},
        projectThree: {},
        projectFour: {},
        pattern: '1',
        patternList: [{
          value: '1',
          label: this.$t('projectRevenue.cooReport.buModel') // 'BU模式'
        }, {
          value: '2',
          label: this.$t('projectRevenue.cooReport.projectModel') // Project模式
        }],
        blockNameCode: '',
        listQuery: {
          page: 1,
          limit: 10,
          bu: [],
          bg: '',
          clientName: '',
          customerNo: '',
          year: '',
          // client: '',
          country: ''
        },
        list: [],
        buCostCount: [],
        projectList: [],
        projectCurrentList: [],
        buList: [],
        bgList: [],
        total: 0
      };
    },
    mounted() {
      this.getQuery()
      this.changeBg(this.listQuery.bg)
      this.changeBu(this.listQuery.bu)
      this.getBuTable();
      if (this.listQuery.bu.length > 0 || this.listQuery.bg !== '' || this.listQuery.clientName !== '' || this.listQuery.year !== '' || this.listQuery.customerNo !== '') {
        this.getList();
      }
    },
    methods: {
      // 合并单元格
      objectSpanMethod({ rowIndex, columnIndex }) {
        if (columnIndex === 16 || columnIndex === 17 || columnIndex === 18) {
          const _row = this.bgArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      },
      mergeCol() {
        this.bgArr = []
        // 计算需要合并列的单元格
        const _this = this
        let contactBg = 0

        _this.buCostCount.forEach((row, index) => {
          row.indexs = index
          if (index === 0) {
            this.bgArr.push(1)
          } else {
            if (row.country === _this.buCostCount[index - 1].country && row.bg === this.buCostCount[index - 1].bg && row.bg) {
              this.bgArr[contactBg] += 1
              this.bgArr.push(0)
            } else {
              this.bgArr.push(1)
              contactBg = index
            }
          }
        })

        console.log('bgArr', this.bgArr)
      },
      queryCustomer(query) {
        this.loading = true;
        customerReq.pageClient({ clientName: query }).then(res => {
          this.loading = false;
          this.optionsCustomer = res.data.rows.map(item => ({ value: item.customerNo, label: item.customerShortName }));
        });
      },
      changeCss({ row }) {
        if (!row.index) {
          return 'background:#f0f2f5;color:#ff9900'
        }
      },
      getQuery() {
        const cooReportListQuery = window.sessionStorage.getItem('cooReportListQuery');
        if (cooReportListQuery) {
          this.listQuery = JSON.parse(cooReportListQuery);
        }
      },
      getMixinColumn(data, name) {
        queryDisplayBlock(data).then(res => {
          if (res.status === 200) {
            if (name === 'buOne') {
              this.buOne = {}
              this.displayBlockNameList = res.data
              for (const i in this.displayBlockNameList) {
                this.buOne[this.displayBlockNameList[i]] = true
              }
              if (res.data.length > 0) {
                this.displayBlockNameListFla.buOne = 'buOne'
              } else {
                this.displayBlockNameListFla.buOne = '0'
              }
              console.log(this.buOne, '1111')
            } else if (name === 'buTwo') {
              this.buTwo = {}
              this.displayBlockNameList = res.data
              for (const i in this.displayBlockNameList) {
                this.buTwo[this.displayBlockNameList[i]] = true
              }
              if (res.data.length > 0) {
                this.displayBlockNameListFla.buTwo = 'buTwo'
              } else {
                this.displayBlockNameListFla.buTwo = '0'
              }
              console.log(this.buTwo, '2222')
            } else if (name === 'buThree') {
              this.buThree = {}
              this.displayBlockNameList = res.data
              for (const i in this.displayBlockNameList) {
                this.buThree[this.displayBlockNameList[i]] = true
              }
              if (res.data.length > 0) {
                this.displayBlockNameListFla.buThree = 'buThree'
              } else {
                this.displayBlockNameListFla.buThree = '0'
              }
              console.log(this.buThree, '33333')
            } else if (name === 'projectOne') {
              this.projectOne = {}
              this.displayBlockNameList = res.data
              for (const i in this.displayBlockNameList) {
                this.projectOne[this.displayBlockNameList[i]] = true
              }
              if (res.data.length > 0) {
                this.displayBlockNameListFla.projectOne = 'projectOne'
              } else {
                this.displayBlockNameListFla.projectOne = '0'
              }
              this.projectTwo = this.projectOne
              this.projectThree = this.projectOne
              this.projectFour = this.projectOne
              console.log(this.projectOne, 'projectOne1111')
            }
          }
        })
      },
      getMixinDialogColumn(data, name) {
        console.log(data, name)
        queryDisplayBlock(data).then(res => {
          if (res.status === 200) {
            if (name === 'buOne') {
              this.buOne = {}
              this.displayBlockNameList = res.data
              for (const i in this.displayBlockNameList) {
                this.buOne[this.displayBlockNameList[i]] = true
              }
              if (res.data.length > 0) {
                this.displayBlockNameListFla.buOne = 'buOne'
              } else {
                this.displayBlockNameListFla.buOne = '0'
              }
              this.TableTitleVisible = true
              console.log(this.buOne, '1111')
            } else if (name === 'buTwo') {
              this.buTwo = {}
              this.displayBlockNameList = res.data
              for (const i in this.displayBlockNameList) {
                this.buTwo[this.displayBlockNameList[i]] = true
              }
              if (res.data.length > 0) {
                this.displayBlockNameListFla.buTwo = 'buTwo'
              } else {
                this.displayBlockNameListFla.buTwo = '0'
              }
              this.TableTitleVisible = true
              console.log(this.buTwo, '2222')
            } else if (name === 'buThree') {
              this.buThree = {}
              this.displayBlockNameList = res.data
              for (const i in this.displayBlockNameList) {
                this.buThree[this.displayBlockNameList[i]] = true
              }
              if (res.data.length > 0) {
                this.displayBlockNameListFla.buThree = 'buThree'
              } else {
                this.displayBlockNameListFla.buThree = '0'
              }
              this.TableTitleVisible = true
              console.log(this.buThree, '33333')
            } else if (name === 'projectOne') {
              this.projectOne = {}
              this.displayBlockNameList = res.data
              for (const i in this.displayBlockNameList) {
                this.projectOne[this.displayBlockNameList[i]] = true
              }
              if (res.data.length > 0) {
                this.displayBlockNameListFla.projectOne = 'projectOne'
              } else {
                this.displayBlockNameListFla.projectOne = '0'
              }
              this.TableTitleVisible = true
              this.projectTwo = this.projectOne
              this.projectThree = this.projectOne
              this.projectFour = this.projectOne
              console.log(this.projectOne, 'projectOne1111')
            }
          }
        })
      },
      // 获取初始的栏位
      getColumn(val) {
        this.blockNameCode = val
        const data = {
          tableName: this.blockNameCode,
          userId: this.$store.getters.info.id
        }
        this.getMixinColumn(data, val)
      },
      // 获取弹框的栏位
      setUp(val) {
        this.blockNameCode = val
        // 设置
        const data = {
          tableName: this.blockNameCode,
          userId: this.$store.getters.info.id
        }
        this.getMixinDialogColumn(data, val)
      },
      getData() {
        this.show = true
        this.list = [];
        this.buCostCount = [];
        this.projectList = [];
        this.projectCurrentList = [];

        getDataCOO(this.listQuery).then(res => {
          if (res.status === 201) {
            this.$message.error(res.message);
            this.loading = false
          } else {
            try {
              this.list = res.data.BU.list
              this.list.push(res.data.BU.allCostCount)
              this.buCostCount = res.data.BU.buCostCount
              this.dataGroupByBG = res.data.dataGroupByBG
              if (this.dataGroupByBG.length > 0 && this.buCostCount.length > 0) {
                this.dataGroupByBG.forEach(v => {
                  for (let i = 0; i < this.buCostCount.length; i++) {
                    if (v.bg === this.buCostCount[i].bg) {
                      this.buCostCount[i].manageCostAmortizations = v.manageCostAmortization
                      this.buCostCount[i].hqamortizations = v.hqamortization
                      this.buCostCount[i].operatingProfits = v.operatingProfit
                      break
                    }
                  }
                })
              }
              this.buCostCount.push(res.data.BU.allCostCount)
              this.projectList = res.data.Project.acrossYear.list
              this.projectList.push(res.data.Project.acrossYear.acrossYearCostCount)

              this.projectCurrentList = res.data.Project.currentYear.list
              this.projectCurrentList.push(res.data.Project.currentYear.currentYearCostCount)
              let r = 1;
              for (let i = 0; i < res.data.BU.list.length; i++) {
                if (this.list[i].year) {
                  this.list[i].index = r;
                  r++;
                }
              }
              r = 1;
              for (let i = 0; i < res.data.BU.buCostCount.length; i++) {
                if (this.buCostCount[i].bg) {
                  this.buCostCount[i].index = r;
                  r++;
                }
              }
              r = 1;
              for (let i = 0; i < this.projectList.length; i++) {
                if (this.projectList[i].year) {
                  this.projectList[i].index = r;
                  r++;
                }
              }
              r = 1;
              for (let i = 0; i < this.projectCurrentList.length; i++) {
                if (this.projectCurrentList[i].year) {
                  this.projectCurrentList[i].index = r;
                  r++;
                }
              }
              this.show = false
              this.mergeCol()
            } catch (e) {
              this.show = false
            }
          }
        });
      },
      getList() {
        if (!this.listQuery.year) {
          this.$message.error(this.$t('placeholder.enterYear'));
          return
        }
        this.listLoading = true;
        this.getData();
      },
      getBuTable() {
        this.getColumn('buOne');
        this.getColumn('buTwo');
        this.getColumn('buThree');
        this.getColumn('projectOne');
        /* this.getColumn('projectTwo');
        this.getColumn('projectThree');
        this.getColumn('projectFour'); */
      },
      cancel(val) {
        if (val) {
          console.log(this.blockNameCode, '提交表格类型')
          this.getColumn(this.blockNameCode);
        }
        this.TableTitleVisible = false
      },
      handleRemit() {
        // 汇出
        let str = '?bg=' + this.listQuery.bg + '&bu=' + this.listQuery.bu + '&customerNo=' + this.listQuery.customerNo + '&year=' + this.listQuery.year + '&userId=' + this.$store.getters.info.id;
        if (this.pattern === '2') {
          const a = document.createElement('a');
          const href = '/api/admin/excel/exportProjectIncomeReportByProject' + str;
          a.download = Date.now();
          a.href = href;
          a.click();
        } else {
          const a = document.createElement('a');
          str = str + '&merge=' + JSON.stringify(this.bgArr)
          const href = '/api/admin/excel/exportProjectIncomeReportByBU' + str;
          a.download = Date.now();
          a.href = href;
          a.click();
        }
        console.log('汇出')
      },
      selectCustomer(item) {
        this.listQuery.customerNo = item.customerNo;
      },
      getCustomerList(queryString, cb) {
        customerReq.pageClient({ clientName: queryString }).then(res => {
          const customerList = res.data.rows;
          // if (res.data.rows.length === 0) {
          //   this.client = ''
          // }
          for (let i = 0; i < customerList.length; i++) {
            customerList[i].value = customerList[i].customerShortName;
          }
          cb(customerList);
        });
      },
      setBg(country) {
        this.listQuery.bu = []
        this.listQuery.bg = ''
        if (country) {
          getBuAndBg(country, '').then(res => {
            this.bgList = res.data.bgList;
            this.buList = res.data.buList;
          });
        } else {
          this.getBu()
          this.getBg()
        }
      },
      getBu() {
        selectBu().then(res => {
          this.buList = res.data;
        });
      },
      getBg() {
        selectBg().then(res => {
          this.bgList = res.data;
        });
      },
      changeBu(val) {
        // 联动bg
        if (val.length === 0) {
          this.getBg()
        } else {
          const srt = val.join(',');
          listbgAndbu({ bu: srt, bg: '' }).then(res => {
            this.bgList = res.data;
          });
        }
      },
      changeBg(val) {
        // 联动bu
        if (val === '') {
          this.getBu()
        } else {
          listbgAndbu({ bu: '', bg: val }).then(res => {
            this.buList = res.data;
          });
        }
      },
      handleFilter() {
        this.getList();
      },
      reset() {
        this.listQuery = {
          page: 1,
          limit: 10,
          bu: [],
          bg: '',
          clientName: '',
          customerNo: '',
          year: '',
          // client: '',
          country: ''
        };
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      }
    },
    beforeDestroy() {
      window.sessionStorage.setItem('cooReportListQuery', JSON.stringify(this.listQuery))
    }
  };
</script>
<style scoped>
  .headerClass {
    padding-left: 20px;
    margin: 10px 0px;
    font-size: 130%;
  }
</style>
